<template>
  <div>
    name:{{ state.name }} <br />
    age:{{ state.age }}
    <div class="box">webpack子页面{{ state.arg }}</div>
    <br />
    <button @click="change">改变父应用的值</button>
    <br />
    <br />
    <button @click="$router.push('/page2')">去页面2</button>
    <br />
    <br />
    <button @click="operate">子应用动作</button>
  </div>
</template>

<script setup>
import {
  reactive,
  onMounted,
  getCurrentInstance,
  computed,
  onActivated
} from 'vue'

const { proxy } = getCurrentInstance()
const state = reactive({
  arg: 0,
  name: '',
  age: ''
})
let currentMicro
onMounted(() => {
  if (proxy.$micro) {
    proxy.$micro.on('ADDCHILD', arg => {
      init()
    })
    proxy.$onGlobalStateChange(parentState => {
      state.name = parentState.name
      state.age = parentState.age
    },true)
  }
})
console.log('setup...')
onActivated(() => {
  console.log('onActivated...')
})
const init = () => {
  state.arg++
}
const operate = () => {
  proxy.$micro.emit('ADDPARENT', '')
}
const change = () => {
  proxy.$setGlobalState({ name: '王五', age: 100 })
  // actions.setGlobalState({ name: state.name, age: state.age })
}
</script>
<style scoped>
.box{
  font-size: 22px;
  background-color: #959da5;
 }
</style>
